<template>
  <div class="panel_h">
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="120px"
      label-position="left"
    >
      <div class="flexrowbetween pt_10 borderb" >
        <div class="c_000">页面样式</div>
        <div class="c_primary commhover" v-if="sqtype" @click="handleSq(1,0)">收起 <i class="el-icon-caret-top f-18"></i> </div>
        <div class="c_primary commhover" v-else @click="handleSq(1,1)">展开 <i class="el-icon-caret-bottom f-18"></i> </div>

      </div>
      <div class="pl_20 pt_20" v-if="sqtype">
        <el-form-item label="活动模板">
          <el-button type="primary" size="small" @click="changeMould">切换模板</el-button>
        </el-form-item>
        <el-form-item label="漂浮图标">
          <div class="flex aligncenter">
            <div class="sloganbox iconbox flexcenter f-13 commhover">
              <img v-if="form.float_url" :src="domain+form.float_url" class="imgs" alt="">
              <span v-else>未设置</span>
              <div class="cover flexcolumn aligncenter justifycenter">
                <input type="file" name="" accept="images/*" id="float" class="sloganimg commhover" @change="upload($event,'float')" alt="点击上传图片"/>
                <span class="c_fff f-13">点击上传</span>
                <span class="c_fff f-13">200 * 200px</span>
              </div>
            </div>
            <!-- <div v-if="form.float_url" class="mr_15">
              <img :src="domain+form.float_url" alt="" class="iconbox" />
            </div> -->
            <el-button v-if="form.float_url" class="ml_20" type="text" @click="clearImg('float_url')">清除</el-button>
            <el-button type="primary" class="ml_20" size="small" @click="openDialog('openpfw')">本地上传</el-button>
          </div>
        </el-form-item>
        <div class="flex aligncenter mb_22">
          <div class="f-14 c_000 s_title">活动slogan</div>
          <div class="sloganbox flexcenter f-13 commhover">
            <img v-if="form.biaoti_url" :src="domain+form.biaoti_url" class="imgs" alt="">
            <span v-else>未设置</span>
            <div class="cover flexcolumn aligncenter justifycenter">
              <input type="file" name="" accept="images/*" id="slogan" class="sloganimg commhover" @change="upload($event,'slogan')">
              <span class="c_fff f-13 mb_20">点击上传</span>
              <span class="c_fff f-13">600 * 180px</span>
            </div>
          </div>
          <div v-if="form.biaoti_url" class="commhover c_primary ml_20 f-15" @click="clearImg('biaoti_url')">清除</div>
          <el-button type="primary" size="small" @click="openDialog('openslogan')" class="ml_20">系统上传</el-button>
          <!-- <div class="commhover c_primary ml_20 f-15">默认</div> -->
        </div>
        <div class="flex aligncenter mb_22">
          <div class="f-14 c_000 s_title">背景图片</div>
          <div class="sloganbox bgbox flexcenter f-13 commhover">
            <img v-if="form.bg_url" :src="domain+form.bg_url" class="imgs" alt="">
            <span v-else>未设置</span>
            <div class="cover flexcolumn aligncenter justifycenter">
              <input type="file" name="" accept="images/*" id="bg" class="sloganimg commhover" @change="upload($event,'bg')">
              <span class="c_fff f-13 mb_20">点击上传</span>
              <span class="c_fff f-13">750 * 1664px</span>
            </div>
          </div>
          <div v-if="form.bg_url" class="commhover c_primary ml_20 f-15" @click="clearImg('bg_url')">清除</div>
          <el-button type="primary" size="small" @click="openDialog('openbgs')" class="ml_20">系统上传</el-button>
        </div>
        <div class="flex aligncenter mb_22">
          <div class="f-14 c_000 s_title">背景音乐</div>
          <!-- <el-form-item label="背景音乐"> -->
          <div class="sloganbox musicbox flexcenter f-13 commhover">
            <audio v-if="form.music_url" controls :src="domain+form.music_url" width='100%'></audio>
            <!-- <img v-if="form.bg_url" :src="domain+form.bg_url" class="imgs" alt=""> -->
            <span v-else>未设置</span>
            <div v-if="!form.music_url" class="cover flexcolumn aligncenter justifycenter">
              <input type="file" name="" accept="audio/*" id="music" class="sloganimg commhover" @change="upload($event,'music')">
              <span class="c_fff f-13">更换背景音乐</span>
            </div>
          </div>
          <div v-if="form.music_url" class="commhover c_primary ml_20 f-15" @click="clearImg('music_url')">清除</div>
          <el-button type="primary" size="small" @click="openDialog('openmusic')" class="ml_20">系统上传</el-button>
          <!-- <el-radio-group v-model="form.radio">
            <el-radio v-for="(item,index) in statusList" :key="index" :label="item.id">{{item.name}}</el-radio>
          </el-radio-group> -->
          <!-- <div>
            <el-button type="primary" size="small" @click="openMusic">系统上传</el-button>
          </div> -->
        </div>
      </div>

      <div class="flexrowbetween pt_10 borderb mt_42" >
        <div class="c_000">分享设置</div>
        <div class="c_primary commhover" v-if="sqtype2" @click="handleSq(2,0)">收起 <i class="el-icon-caret-top f-18"></i> </div>
        <div class="c_primary commhover" v-else @click="handleSq(2,1)">展开 <i class="el-icon-caret-bottom f-18"></i> </div>
      </div>
      <div class="pl_20 pt_20" v-if="sqtype2">
        <el-form-item label="分享活动">
          <el-radio-group v-model="form.is_share" @change="onSave">
            <el-radio v-for="(item,index) in statusList" :key="index" :label="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.is_share">
          <el-form-item label="分享至朋友圈">
            <el-radio-group v-model="form.share_data.share_friend" @change="onSave">
              <el-radio v-for="(item,index) in statusList" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex aligncenter mb_22">
            <div class="f-14 c_000 s_title">分享图标</div>
            <div class="sloganbox iconbox flexcenter f-13 commhover">
              <img v-if="form.share_data.photo" :src="domain+form.share_data.photo" class="imgs" alt="">
              <span v-else>未设置</span>
              <div class="cover flexcolumn aligncenter justifycenter">
                <input type="file" name="" accept="images/*" id="shareicon" class="sloganimg commhover" @change="upload($event,'shareicon')">
                <span class="c_fff f-13 mb_10">点击上传</span>
                <span class="c_fff f-13">200 * 200px</span>
              </div>
            </div>
            <div v-if="form.share_data.photo" class="commhover c_primary ml_20 f-15" @click="clearImg('shareicon')">清除</div>
            <!-- <div class="commhover c_primary ml_20 f-15">默认</div> -->
          </div>
          <el-form-item label="分享标题">
            <el-input placeholder="分享标题" v-model="form.share_data.title" :maxlength="30" @input="handlerChange" @focus="focus" @blur="changeInput" />
          </el-form-item>
          <el-form-item label="分享内容">
            <el-input placeholder="分享内容" v-model="form.share_data.context" type="textarea" rows="5" @input="handlerChange" @focus="focus" @blur="changeInput" :maxlength="50" />
          </el-form-item>
        </template>
      </div>
    </el-form>

    <el-dialog
      title="系统音乐"
      :visible.sync="openmusic"
      width="800px"
      center
    >
      <music-comp v-if="openmusic" :activeId='activeId' :src='form.music_url' @changeImg='uploadItem'/>
    </el-dialog>

    <el-dialog
      title="漂浮物"
      :visible.sync="openpfw"
      width="800px"
      center
    >
      <PfwComp v-if="openpfw" :activeId='activeId' :src='form.float_url' @changeImg='uploadItem'/>
    </el-dialog>

    <el-dialog
      title="背景图片"
      :visible.sync="openbgs"
      width="940px"
      center
    >
      <BgComp v-if="openbgs" :activeId='activeId' :src='form.bg_url' @changeImg='uploadItem'/>
    </el-dialog>

    <el-dialog
      title="专题图片"
      :visible.sync="openslogan"
      width="800px"
      center
    >
      <slogan-comp v-if="openslogan" :activeId='activeId' :src='form.biaoti_url' @changeImg='uploadItem'/>
    </el-dialog>
  </div>
</template>

<script>
import PfwComp from './PfwComp.vue';
import { uploadPhoto } from "@/api/comm";
import { isOverSize } from '@/utils/validate'
import { taskInfo,settingEdit } from '@/api/active'
import MusicComp from './MusicComp.vue';
import BgComp from './BgComp.vue'
import SloganComp from './SloganComp.vue'
import { mapGetters,mapActions } from 'vuex'
export default {
  data() {
    return {
      statusList: [
        { name: "开启", id: 1 },
        { name: "关闭", id: 0 },
      ],
      t_id:'',
      sqtype:1,
      sqtype2:1,
      form: {
        id:'',
        float_url:'',
        biaoti_url:'',
        bg_url:'',
        music_url:'',
        is_share:0,//开启分享设置（1开0关）
        share_data:{
          share_friend:0,
          photo:'',
          title:'',
          context:''
        },
      },
      // rules: {
      //   title:[{ required: true, message: '请输入活动标题', trigger: 'blur' }],
      //   set:[{ required: true, message: '请选择开奖设置', trigger: 'change' }],
      //   startTime:[{ required: true, message: '请选择抽奖开始时间', trigger: 'change' }],
      //   endTime:[{ required: true, message: '请选择抽奖结束时间', trigger: 'change' }],
      //   jieshao:[{ required: true, message: '请输入活动介绍', trigger: 'change' }],
      // },
      openmusic:false,
      openpfw:false,
      openbgs:false,
      openslogan:false,
      isRewirite:false,
    };
  },
  computed: {
    ...mapGetters(["iframeUrl"]),
  },
  created(){
    this.getInfo()
  },
  props:{
    activeId:{
      default:''
    }
  },
  components: {
    PfwComp,
    MusicComp,
    BgComp,
    SloganComp
  },
  methods: {
    ...mapActions(["setUrl"]),
    getInfo(){
      taskInfo({id:this.activeId}).then(res=>{
        let data = res.data
        this.info = data
        this.t_id = data.task.t_id
        this.form.id = data.task.id
        this.form.float_url = data.setting.float_url
        this.form.biaoti_url = data.setting.biaoti_url
        this.form.bg_url = data.setting.bg_url
        this.form.music_url = data.setting.music_url
        this.form.is_share = data.setting.is_share
        this.form.share_data.share_friend = Number(data.setting.share_data.share_friend)
        this.form.share_data.title = data.setting.share_data.title
        this.form.share_data.context = data.setting.share_data.context
        this.form.share_data.photo = data.setting.share_data.photo
         console.log('this.form.share_data.share_friend:',data.setting.share_data)
      })
    },

    // 刷新左侧
    reflush(){

    },

    handleSq(type,status){
      if(type == 1){
        this.sqtype = status
      }else if(type == 2){
        this.sqtype2 = status
      }
    },

    upload(event,type){
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", type);
      uploadPhoto(formData).then((res) => {
        if(type == 'slogan'){ 
          this.form.biaoti_url = res.data;
        }else if(type == 'bg'){
          this.form.bg_url = res.data;
        }else if(type == 'music'){
          this.form.music_url = res.data;
        }else if(type == 'float'){
          this.form.float_url = res.data;
        }else if(type == 'shareicon'){
          this.form.share_data.photo = res.data;
        }
        document.getElementById(type).value = null;
        this.onSave()
      });
    },

    uploadItem({type,url}){
      this.form[type] = url
      this.onSave(1)
    },

    clearImg(type){
      if(type == 'shareicon'){
        this.form.share_data.photo = ''
      }else{
        this.form[type] = ''
      }
      this.onSave(1)
    },

    handlerChange(){
      this.isRewirite = true
    },

    focus(){
      this.isRewirite = false
    },

    changeInput(){
      if(this.isRewirite){
        this.onSave()
      }
    },

    // changeShare(val){
    //   if(!val){
    //     this.form.share_data.share_friend = 0
    //     this.form.share_data.photo = 0
    //     this.form.share_data.share_friend = 0
    //     this.form.share_data.share_friend = 0
    //   }
    //   this.onSave()
    // },

    onSave(type){
      settingEdit(this.form).then(res=>{
        this.$message.success('设置成功')
        this.getInfo()
        // 刷新
        this.setUrl(this.iframeUrl)
        if(type ==1){
          this.reflush()
        }
      })
    },

    changeMould(){
      this.$emit('open')
    },

    openDialog(type){
      console.log('点击了--',type)
      // this.openbgs = true
      this[type] = true
    },

    handleClose(type){
      // console.log(type)
      this[type] = false
    },

  },
};
</script>
<style lang="scss" scoped>
.panel_h {
  height: calc(100vh - 239px);
  overflow-y: auto;
  padding-right: 12px;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #c1c1c1;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #ededed;
  }
}
.line {
  height: 82px;
}
.floatimg{
  width: 100px;
  height: 100px;
}
.borderb{
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
::v-deep label {
  font-weight: normal;
}
::v-deep .el-form-item__label {
  color: #000;
  font-size: 14px;
}
.sloganbox{
  width: 180px;
  height: 90px;
  background-color: #f5f5f5;
  border-radius: 4px;
  color: #555;
  position: relative;
  overflow: hidden;
  .imgs{
    width: 100%;
    height: 100%;
  }

  &:hover .cover{
    display: flex!important;;
  }

  .sloganimg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
  }
}
.bgbox{
  width: 120px;
  height: 210px;
}
.musicbox{
  min-width: 300px;
  height:50px
}
.iconbox{
  width: 80px;
  height: 80px;
}
.s_title{
  width: 120px;
  // text-align: right;
  padding-right: 12px;
}
.cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>